﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>前端框架MUI</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrom=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta name="description" content="后台管理前端框架" />
    <meta name="keywords" content="后台管理，管理框架，前端框架" />
    <meta name="author" content="mmcai" />
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

    <link href="assets/css/frame.css" rel="stylesheet" />
    <script src="assets/js/jquery.1.9.0.js"></script>

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="assets/js/BsIE/html5shiv.js"></script>
    <script src="assets/js/BsIE/respond.js"></script>
    <![endif]-->

</head>
<body class="frame">

    <header class="header">
        <div class="frame-top">
            <div class="top-skin">
                <div class="skin-top-inner"></div>
                <div class="skin-top-inner2"></div>
            </div>
            <div class="top-skin-right"></div>
            <h1>
                <a href="javascript:void(0);" title="首页">
                    <img src="assets/imgs/logo.png" title="福建省食品药品监督管理局" />
                </a>
            </h1>
            <div class="system-box mui-dropdown" style="display:none;">
                <a href="javascript:void(0);" class="dropdown-toggle" title="展开">
                    <i class="fa fa-th"></i>
                </a>
                <div class="dropdown-menu">
                    内容
                </div>
            </div>
            <ul class="component clearfix">
                <li class="user">
                    <a href="javascript:void(0);" title="管理员">
                        <span>欢迎您：</span>
                        <span>王明涛</span>
                        <i class="fa fa-angle-down"></i>
                    </a>
                </li>
                <li class="pn1">|</li>
                <li class="setting">
                    <div class="mui-dropdown" data-event="hover">
                        <a href="javascript:void(0);" class="dropdown-toggle" title="设置">
                            <i class="fa fa-gear hide"></i>
                            设置
                        </a>
                        <ul class="dropdown-menu dropdown-left">
                            <li><a href="#">个人资料</a></li>
                            <li><a href="#">个人资料</a></li>
                            <li><a href="#">个人资料</a></li>
                            <li><a href="#">个人资料</a></li>
                        </ul>
                    </div>
                </li>
                <li class="pn1">|</li>
                <li class="msg">
                    <a href="###">
                        <span>消息</span>
                        <i class="msg-num">1</i>
                    </a>
                </li>
                <li class="pn1">|</li>
                <li class="quit">
                    <a href="quit.html" rel="extend" target="iframe" data-js="quit.js" data-id="quit" title="退出">
                        退出
                    </a>
                </li>
            </ul>
        </div>
        <nav></nav>
    </header>

    <nav class="navtab" id="navTab">
        <a href="javascript:void(0);" class="nav-btn nav-prev" title="向前"><i class="fa fa-angle-left"></i></a>
        <a href="javascript:void(0);" class="nav-btn nav-next" title="向后"><i class="fa fa-angle-right"></i></a>
        <div class="tabsnav">
            <ul>
                <li>
                    <a id="defaultTab" class="active" data-id="default" href="javascript:void(0);" title="欢迎首页"><i class="fa fa-home"></i>欢迎首页</a>
                </li>
                <!--<li>
                    <a id="dangan" data-id="dangan" href="javascript:void(0);" title="企业档案"><i class="fa fa-file-text-o"></i>企业档案</a>
                </li>
                <li>
                    <a id="xuke" data-id="xuke" href="javascript:void(0);" title="行政许可"><i class="fa fa-file-text-o"></i>行政许可</a>
                </li>
                <li>
                    <a id="jiancha" data-id="jiancha" href="javascript:void(0);" title="行政监察"><i class="fa fa-file-text-o"></i>行政监察</a>
                </li>
                <li>
                    <a id="jicha" data-id="jicha" href="javascript:void(0);" title="行政稽查"><i class="fa fa-file-text-o"></i>行政稽查</a>
                </li>
                <li>
                    <a id="chufa" data-id="chufa" href="javascript:void(0);" title="行政处罚"><i class="fa fa-file-text-o"></i>行政处罚</a>
                </li>
                <li>
                    <a id="chouyan" data-id="chouyan" href="javascript:void(0);" title="监督抽验"><i class="fa fa-file-text-o"></i>监督抽验</a>
                </li>
                <li>
                    <a id="guanli" data-id="guanli" href="javascript:void(0);" title="信用管理"><i class="fa fa-file-text-o"></i>信用管理</a>
                </li>
                <li>
                    <a id="xitong" data-id="xitong" href="javascript:void(0);" title="系统管理"><i class="fa fa-file-text-o"></i>系统管理</a>
                </li>-->
            </ul>
        </div>
        <div class="navDropDown dropdown">
            <a href="javascription:void(0);" class="drop-toggle" title="导航菜单"><i class="fa fa-angle-down"></i></a>
            <dl class="drop-menu">
                <dd class="closeNav"><a data-id="closeNav" href="javascript:void(0);" title="欢迎首页"><i class="fa fa-times"></i>关闭全部</a></dd>
                <dd class="default-navs drop-nav"><a class="active" data-id="default" href="javascript:void(0);" title="欢迎首页">欢迎首页</a></dd>
            </dl>
        </div>
    </nav>

    <aside class="nav" id="nav" data-src="assets/js/navData.js">
        <div class="navTree">
            <ul class="tree active">
                <li class="tree-item">
                    <a class="tree-toggle" href="javascript:void(0);"><i class="fa fa-folder"></i><span>界面组件</span></a>
                    <ul class="tree-menu">
                        <li class="tree-item">
                            <a class="tree-toggle" href="javascript:void(0);"><i class="fa fa-folder"></i><span>选项卡</span></a>
                            <ul class="tree-menu">
                                <li><a rel="extend" data-id="tabsHor" data-js="tabs-hor.js" href="page/widgets/tabs-hor.html"><i class="fa fa-file-o"></i>横向选项卡</a></li>
                                <li><a rel="extend" data-id="tabsVer" data-js="tabs-ver.js" href="page/widgets/tabs-ver.html"><i class="fa fa-file-o"></i>纵向选项卡</a></li>
                                <li><a rel="extend" data-id="tabsAdvance" data-js="tabs-advance.js" href="page/widgets/tabs-advance.html"><i class="fa fa-file-o"></i>高级选项卡</a></li>
                            </ul>
                        </li>
                        <li><a rel="extend" data-id="dialog" data-js="dialog.js" href="page/widgets/dialog.html"><i class="fa fa-file-o"></i>弹出框</a></li>
                        <li><a rel="extend" data-id="alert" data-js="alert.js" href="page/widgets/alert.html"><i class="fa fa-file-o"></i>提示框</a></li>
                        <li><a rel="extend" data-id="dropmenu" data-js="dropmenu.js" href="page/widgets/dropmenu.html"><i class="fa fa-file-o"></i>下拉菜单</a></li>
                        <li><a rel="extend" data-id="upload" data-js="upload.js" href="page/widgets/upload.html"><i class="fa fa-file-o"></i>上传</a></li>
                        <li><a rel="extend" data-id="editor" data-js="editor.js" href="page/widgets/editor.html"><i class="fa fa-file-o"></i>文本编辑器</a></li>
                    </ul>
                </li>
                <li class="tree-item">
                    <a href="#" class="tree-toggle"><i class="fa fa-folder"></i><span>典型页面</span></a>
                    <ul class="tree-menu">
                        <li><a rel="extend" data-id="formBase" target="iframe" data-js="form_base.js" href="page/form_base.html"><i class="fa fa-file-o"></i>单列表单</a></li>
                        <li><a rel="extend" data-id="formColumns" data-js="form_columns.js" href="page/form_columns.html"><i class="fa fa-file-o"></i>多列表单</a></li>
                        <li><a rel="extend" data-id="tableBase" data-js="table_base.js" href="page/table_base.html"><i class="fa fa-file-o"></i>基本表格</a></li>
                        <li><a rel="extend" data-id="tableAdvance" data-js="table_advance.js" href="page/table_advance.html"><i class="fa fa-file-o"></i>高级表格</a></li>
                        <li><a rel="extend" data-id="searchInline" data-js="search-inline.js" href="page/search-inline.html"><i class="fa fa-file-o"></i>单行搜索</a></li>
                        <li><a rel="extend" data-id="searchBlock" data-js="search-block.js" href="page/search-block.html"><i class="fa fa-file-o"></i>多行搜索</a></li>
                    </ul>
                </li>
                <li>
                    <a target="_blank" href="login.html"><i class="fa fa-file-o"></i><span>登录页</span></a>
                </li>
                <li>
                    <a target="_blank" href="404.html"><i class="fa fa-file-o"></i><span>404</span></a>
                </li>
                <li>
                    <a target="_blank" href="500.html"><i class="fa fa-file-o"></i><span>500</span></a>
                </li>
                <li>
                    <a target="_blank" href="showModalDialog.html"><i class="fa fa-file-o"></i><span>弹出框选人</span></a>
                </li>
            </ul>
        </div>
    </aside>

    <section class="main" id="main">
        <div id="defaultPanel" class="defaultPanel page-panel" data-id="defaultPanel">
            <h1>欢迎使用福建省食品药品后台管理系统</h1>
            <div class="mui-tabs">
                <ul class="tabs-hd clearfix">
                    <li><a href="#home" class="active">显示信息</a></li>
                    <li><a href="#panel">系统参数</a></li>
                    <li><a href="#copy">版权说明</a></li>
                </ul>
                <div class="tabs-body">
                    <div id="home" class="tabs-panel active">这里是显示信息的内容</div>
                    <div id="panel" class="tabs-panel">这里是系统参数的内容</div>
                    <div id="copy" class="tabs-panel">这里是版权说明的内容</div>
                </div>
            </div>


        </div>
        <iframe id="frame" class="iframe-panel" name="frame" frameborder="0" scrolling="auto" contenteditable="false" src="page/default.html"></iframe>
    </section>

    <!--分类选择-->
    <div class="frame-choose">
        <div class="frame-mask"> </div>
        <div class="frame-mask-content">
            <ul class="clearfix">
                <li class="color-green bounceIn">
                    <a href="javascript:void(0);">
                        <i class="fa fa-mobile"></i>
                        <span>后台管理</span>
                    </a>
                </li>
                <li class="color-nephritis fadeInDown">
                    <a href="javascript:void(0);">
                        <i class="fa fa-folder"></i>
                        <span>移动应用</span>
                    </a>
                </li>
                <li class="color-belize-hole">
                    <a href="javascript:void(0);">
                        <i class="fa fa-paper-plane"></i>
                        <span>移动应用</span>
                    </a>
                </li>
                <li class="color-wisteria">
                    <a href="javascript:void(0);">
                        <i class="fa fa-camera"></i>
                        <span>移动应用</span>
                    </a>
                </li>
                <li class="color-midnight-blue">
                    <a href="javascript:void(0);">
                        <i class="fa fa-backward"></i>
                        <span>移动应用</span>
                    </a>
                </li>
                <li class="color-orange">
                    <a href="javascript:void(0);">
                        <i class="fa fa-dribbble"></i>
                        <span>移动应用</span>
                    </a>
                </li>
                <li class="color-pumpkin">
                    <a href="javascript:void(0);">
                        <i class="fa fa-apple"></i>
                        <span>移动应用</span>
                    </a>
                </li>
                <li class="color-pomegranate">
                    <a href="javascript:void(0);">
                        <i class="fa fa-apple"></i>
                        <span>移动应用</span>
                    </a>
                </li>
                <li class="color-asbestos">
                    <a href="javascript:void(0);">
                        <i class="fa fa-apple"></i>
                        <span>移动应用</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <!--遮罩面板-->
    <div class="masklayer-box" id="maskLayer">
        <div class="masklayer-inner">
            <img src="assets/imgs/loading.gif" alt="正在加载" />
            <span>正在加载...</span>
        </div>
        <div class="masklayer-skin"></div>
    </div>

    <!--JS代码-->
    <script src="assets/js/plugins/handlebars-v1.3.0.js"></script>
    <script type="text/x-handlebars-template" id="menu-template">
        {{#each data}}
        {{#if submenu}}
        <li class="tree-item">
            <a href="javascript:void(0);" data-id="{{id}}" class="tree-toggle"><i class="fa fa-folder-o"></i>{{title}}</a>
            <ul class="tree-menu">
                {{#each submenu}}
                {{#if submenu}}
                <li class="tree-item">
                    <a href="javascript:void(0);" data-id="{{id}}" class="tree-toggle"><i class="fa fa-folder-o"></i>{{title}}</a>
                    <ul class="tree-menu">
                        {{#each submenu}}
                        <li><a rel="extend" data-id="{{id}}" target="frame" data-js="{{id}}.js" href="{{src}}"><i class="fa fa-file-o"></i>{{title}}</a></li>
                        {{/each}}
                    </ul>
                </li>
                {{else}}
                <li><a rel="extend" data-id="{{id}}" target="frame" data-js="{{id}}.js" href="{{src}}"><i class="fa fa-file-o"></i>{{title}}</a></li>
                {{/if}}
                {{/each}}
            </ul>
        </li>
        {{else}}
        <li><a href="{{src}}" rel="extend" title="{{title}}" target="frame" data-id="{{id}}"><i class="fa fa-file-o"></i>{{title}}</a></li>
        {{/if}}
        {{/each}}
    </script>
    <!--JS代码-->
    <script src="assets/js/plugins/jquery.mui.js"></script>
    <script src="assets/js/dist/frame.min.js"></script>
</body>
</html>
